
	<!DOCTYPE html>
	<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>hello_react</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支撑react操作DOM-->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
		<!-- 引入props-types，用于对组件标签属性进行 -->
		<script type="text/javascript" src="../js/prop-types.js"></script>

	</head>

	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>
		<div id="demo"></div>
		<div id="demo2"></div>
		<div id="hanshu"></div>

	<script type="text/babel">/* 此处必须写成babel */
	// 非受控组件
		// class Login extends React.Component{
		// 	handSubmit = ( event) =>{
		// 		event.preventDefault()	//阻止表单提交
		// 		const{username,password} = this
		// 		alert(`用户名：${username.value},密码：${password.value}`)
		// 	}
		// 	render(){
		// 		return(
		// 			<form action="http://www.atguigu.com" onSubmit={this.handSubmit}>
		// 				用户：<input ref= {c => this.username = c} type="text" name="username"/><br/>
		// 				密码：<input ref= {c => this.password = c} type="password" name="password"/><br/>
		// 				<button>登录</button>
		// 			</form>
		// 		)
		// 	}
		// }
		// ReactDOM.render(<Login/>,document.getElementById("test"))

		// 受控组件
		class Login extends React.Component{
			state = {name:"",password:''}
			handSubmit = ( event) =>{
				event.preventDefault()	//阻止表单提交
				const{name,password} = this.state
				alert(`用户名：${name},密码：${password}`)
			}
			// 函数柯里化	——	统一方法
			saveFormdata = (type) =>{
				return (event)=>{
					this.setState({[type]:event.target.value})
				}
			}
			change_name = (event) =>{
				this.setState({name:event.target.value})
			}
			change_pass = (event) =>{
				this.setState({password:event.target.value})
			}
			render(){
				return(
					<form action="http://www.atguigu.com" onSubmit={this.handSubmit}>
						用户：<input onChange={this.saveFormdata("name")} type="text" name="username"/><br/>
						密码：<input onChange={this.saveFormdata("password")} type="password" name="password"/><br/>
						<button>登录</button>
					</form>
				)
			}
		}
		ReactDOM.render(<Login/>,document.getElementById("test"))
	</script>
	</body>
	<style>
		.title{
			background-color: aqua;
		}
	</style>

	</html>
